<template>
    <el-card class="w-full pt-[5px]">
        <el-form :model="searchForm" class="mt-[20px]" label-width="110px">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="姓名" class="mb-[0px]">
                        <el-input v-model="searchForm.name" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="工作单位" class="mb-[0px]">
                        <el-input v-model="searchForm.workUnit" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="最后学位" class="mb-[0px]">
                        <el-select v-model="searchForm.eduDegree" multiple collapse-tags collapse-tags-tooltip
                            clearable>
                            <el-option v-for="item in xwList" :key="item.code" :label="item.name" :value="item.code" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <div class="flex justify-end">
                        <el-button type="primary" @click="searchFormOpen = !searchFormOpen">更多
                            <el-icon color="#fff">
                                <CaretTop v-show="searchFormOpen" />
                                <CaretBottom v-show="!searchFormOpen" />
                            </el-icon>
                        </el-button>
                        <el-button type="primary" @click="getList(1)">查询</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20" class="mt-[20px]" v-show="searchFormOpen">
                <el-col :span="6">
                    <el-form-item label="职称" class="mb-[0px]">
                        <el-tree-select v-model="searchForm.titleId" node-key="id" :props="defaultProps" :data="zcList"
                            multiple clearable>
                        </el-tree-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="专家来源" class="mb-[0px]">
                        <el-select v-model="searchForm.expertSource" clearable>
                            <el-option v-for="item in zhuanjialaiyuanOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="职工号" class="mb-[0px]">
                        <el-input v-model="searchForm.account" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="一级学科" class="mb-[0px]">
                        <el-select v-model="searchForm.subjectId" multiple collapse-tags collapse-tags-tooltip
                            clearable>
                            <el-option v-for="item in yjxkList" :key="item.id" :label="item.label" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="性别" class="mt-[20px]">
                        <el-select v-model="searchForm.sexId" clearable>
                            <el-option v-for="item in sexList" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="最后学历" class="mt-[20px]">
                        <el-select v-model="searchForm.eduLevel" multiple collapse-tags collapse-tags-tooltip clearable>
                            <el-option v-for="item in xlList" :key="item.code" :label="item.name" :value="item.code" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="荣誉称号" class="mt-[20px]">
                        <el-select v-model="searchForm.honorTitleId" multiple collapse-tags collapse-tags-tooltip
                            clearable>
                            <el-option v-for="item in rychList" :key="item.code" :label="item.name"
                                :value="item.code" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="手机号码" class="mt-[20px]">
                        <el-input v-model="searchForm.mobile" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="办公电话" class="mb-[20px]">
                        <el-input v-model="searchForm.telOffice" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="研究方向" class="mb-[20px]">
                        <el-input v-model="searchForm.researchField" clearable />
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
    </el-card>
    <el-card class="w-full pt-[5px] mt-[10px]">
        <div class="mb-[20px]">
            <el-button @click="goBack">
                返回
            </el-button>
        </div>
        <el-table :data="tableData" class="w-full" @selection-change="handleSelectionChange" stripe>
            <el-table-column type="selection" width="55" />
            <el-table-column prop="reviewerName" label="姓名">
                <template #default="scope">
                    <el-link type="primary" @click="openpeopledetails(scope.row)">{{ scope.row.name }}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="workUnit" label="工作单位" :formatter="formatpsfaId" />
            <el-table-column prop="titleId" label="职称"> <template #default="scope">
                    <el-tree-select v-model="scope.row.titleId" class="zcSelect" node-key="id" :data="zcList"
                        :render-after-expand="false" placeholder="" disabled />
                </template>
            </el-table-column>
            <el-table-column prop="eduDegree" label="最后学位">
                <template #default="scope">
                    <Feedback :id="scope.row.eduDegree" :list="xwList">
                    </Feedback>
                </template>
            </el-table-column>
            <el-table-column prop="subjectId" label="一级学科">
                <template #default="scope">
                    <Feedback :id="scope.row.subjectId" :list="yjxkList" :mapping="['id', 'label']">
                    </Feedback>
                </template>
            </el-table-column>
            <el-table-column label="评审进度">
                <template #default="scope">
                    <el-progress :text-inside="true" :stroke-width="26" :percentage="countProgress(scope.row)" />
                </template>
            </el-table-column>
            <el-table-column prop=" reviewNum" label="评审数/分配数">
                <template #default="scope">
                    {{ scope.row.reviewNum + "/" + scope.row.allocationNum }}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="380" align="center">
                <template #default="scope">
                    <el-button type="primary" size="small" plain @click="handleEdit(scope.row)">
                        查看评审结果
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="mt-[20px] flex justify-end">
            <pagination v-show="total > 0" :total="total" v-model:page="pageInfo.pageNum"
                v-model:limit="pageInfo.pageSize" @pagination="getList" />
        </div>
    </el-card>
    <viewModal v-model="ViewdialogVisible" :applyInfoId="applyInfoId" :reviewerId="reviewerId" />
    <zjrcpeopleDetails :activ="activ" :obj="obj" @close-dialog="activ = false"></zjrcpeopleDetails>
</template>

<script setup>
import { onMounted } from 'vue';
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { getexpertListByReviewPlan, getexpertReviewBookListByReviewPlan } from "@/api/achievement/cghj"
import viewModal from "./viewModal.vue";
import useCategoryStore from "@/store/modules/category";
import zjrcpeopleDetails from '@/components/peopleDetails/zjrcpeopleDetails.vue'

const router = useRouter();
const route = useRoute();
const searchFormOpen = ref(false);
const ViewdialogVisible = ref(false);
const searchForm = ref({
    name: "",
    workUnit: "",
    eduDegree: [],
    titleId: [],
    expertSource: "",
    account: "",
    subjectId: [],
    sexId: '',
    eduLevel: [],
    mobile: "",
    telOffice: "",
    researchField: "",
    honorTitleId: [],
});
const pageInfo = ref({
    pageNum: 1,
    pageSize: 10
})
const total = ref(0)
const tableData = ref([]);

const applyInfoId = ref('')
const reviewerId = ref('')
//点击编辑
const handleEdit = (i) => {
    applyInfoId.value = route.query.applyInfoId
    reviewerId.value = i.id
    ViewdialogVisible.value = true

};
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
    multipleSelection.value = val
}

const defaultProps = {
    children: 'children',
    label: 'label',
}


const zhuanjialaiyuanOptions = [
    {
        value: '1',
        label: '校内',
    },
    {
        value: '0',
        label: '校外',
    },
]
const sexList = [
    {
        value: '1',
        label: '男',
    },
    {
        value: '0',
        label: '女',
    },
]


const categoryStore = useCategoryStore();
const { xlList, xwList, zcList, yjxkList, rychList } = storeToRefs(categoryStore); // 解构状态
const { getxlList, getxwList, getzcList, getyjxkList, getrychList } = categoryStore; // 解构方法


const goBack = () => {
    router.back()

}

const initList = () => {
    getList()
}

const getList = async (i) => {
    if (i == 1) {
        pageInfo.value.pageNum = 1
    }
    let parms = {
        ...searchForm.value,
        ...pageInfo.value,
        reviewPlanId: route.query.id
    }
    parms.eduDegree = searchForm.value.eduDegree.join(',')
    parms.titleId = searchForm.value.titleId.join(',')
    parms.subjectId = searchForm.value.subjectId.join(',')
    parms.eduLevel = searchForm.value.eduLevel.join(',')
    parms.honorTitleId = searchForm.value.honorTitleId.join(',')
    let res = await getexpertListByReviewPlan(parms)
    if (res.code == 200) {
        tableData.value = res.rows
        total.value = res.total
        console.log(tableData.value)

    }
}

const countProgress = (row) => {
    return (Number(row.reviewNum) / Number(row.allocationNum) * 100).toFixed(2)

}


const activ = ref(false)
const obj = ref('')
const openpeopledetails = function (row) {
    activ.value = true
    console.log(activ.value)
    obj.value = row.id
}

onMounted(() => {
    initList()
    if (!xlList.value.length) {
        getxlList()
    }
    if (!xwList.value.length) {
        getxwList()
    }
    if (!zcList.value.length) {
        getzcList()
    }
    if (!yjxkList.value.length) {
        getyjxkList()
    }
    if (!rychList.value.length) {
        getrychList()
    }
});
</script>

<style scoped lang="scss">
// @import url("@/views/achievement/index.scss");

:deep(.zcSelect) {


    .el-select__wrapper.is-disabled {
        background-color: transparent;
        box-shadow: 0 0 0 0px var(--el-select-disabled-border) inset;
        color: #606266;
        cursor: auto;


        .el-select__selected-item {
            color: #606266;
        }
    }

    .el-select__suffix {
        display: none;
    }
}

:deep(.el-form-item--default .el-form-item__label) {
    height: 40px;
    line-height: 40px;
}
</style>